.documents {
  padding: 0 20px;
  height: calc(100vh - 68px);
  .cards {
    @height: calc(0.618 * 100%);
    position: relative;
    width: 430px;
    border-radius: 12px;
    margin: 15px;
    transition: 0.15s;
    background: #63bbd0;
    float: left;

    .framework {
      padding-top: @height;
      overflow: hidden;
    }
    .container {
      @padding: 15px;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding: @padding;
      > .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          font-size: 30px;
          margin-left: 10px;
        }
      }
      > p {
        font-size: 18px;
      }
      > .material {
        padding: 5px 20px;
        > div {
          margin: 5px 0;
        }
      }
      > .more {
        position: absolute;
        right: @padding;
        bottom: @padding;
        cursor: pointer;
      }
    }
  }
}
